import React, { FC } from 'react';
import { Checkbox } from 'choerodon-ui';
import styles from '../style.less';
import Stepper from './Stepper';

export interface Cartsprops {
  value: Cart;
  onChange: (type: string, index: number, value?: any) => void;
  index: number;
}

export interface Cart {
  name: string;
  code: string;
  price: number;
  unit: string;
  volume: number;
  volumeUnit: string;
  dosage: string;
  makerName: string;
  number: number;
  totalPrice: number;
  saleUnit: string;
  checked: boolean;
  // onChange?: (type: string, value?: any) => void;
}

const Carts: FC<Cartsprops> = props => {
  const { value, onChange, index } = props;
  return (
    <div className={styles.carts}>
      <div className={styles['cart-header']}>
        <Checkbox onChange={e => onChange('checkbox', index, e)} checked={value.checked}>
          [{value.code}]{value.name}
        </Checkbox>
        <span className={styles['cart-price']}> ¥{value.totalPrice} </span>
      </div>
      <div className={styles['cart-content']}>
        <div className={styles['cart-desc']}>
          <span>{`${value.volume}${value.volumeUnit}/${value.unit}`}</span>
          <span style={{ marginLeft: 16 }}>{value.dosage}</span>
        </div>
        <span>{value.makerName}</span>
      </div>
      <div className={styles['cart-footer']}>
        <div className={styles['footer-left']}>
          <span>
            {value.number}
            {value.saleUnit}
          </span>
          <span style={{ marginLeft: 10 }}>
            ¥{value.price}/{value.saleUnit}
          </span>
        </div>
        <div className={styles['footer-right']}>
          <Stepper value={value.number} onChange={onChange} index={index} />
        </div>
      </div>
    </div>
  );
};

export default Carts;
